<style>
#user_panel{
	width:900px;
	margin:0 auto;
	border:0px solid #f2f2f2;
	border-radius:5px;
}
#user_panel .xyd_header{
	line-height:50px;
	border-bottom:1px solid #15A0F5;
	padding-left:2em;
	font-size:14px;
	color:#15A0F5;
}

#user_panel .xyd_body{
	width:800px;
	margin:0 auto;
	padding:20px 0px 20px 0px;
}
#user_panel .xyd_group{
	padding:10px 0px 10px 0px;
}
#user_panel .xyd_float{
	float:left;
	outline:0px solid #f00;
}
#user_panel .xyd_float_right{
	float:right;
}
#user_panel .xyd_line{
	border-bottom:1px solid #ccc;
}

#user_panel .xyd_body .xyd_label{
	width:160px;
	line-height:40px;
	padding-left:1em;
	padding-right:1em;
	text-align:right;
	color:#666;
}
#user_panel .xyd_body .xyd_input{
	width:300px;
	line-height:40px;
	padding-top:5px;
	outline:0px solid #f00;
}
#user_panel .xyd_body .xyd_input input{
	height:30px;
}
#user_panel .xyd_body .xyd_message{
	width:200px;
	line-height:40px;
	padding-left:1em;
	color:#666;
}
#user_panel #password_level{
	width:300px;
}

#user_panel #password_level .level{
	width:32%;
	margin-left:1%;
	height:20px;
	line-height:20px;
	color:#333;
	text-align:center;
	border-radius:3px;
	background:#f2f2f2;
}
#user_panel #password_level .levelRed{
	background:#FFB855;
	color:#fff;
}
#user_panel #password_level .leveBlue{
	background:#307ECC;
	color:#fff;
}
#user_panel #password_level .leveGreen{
	background:#82AF6F;
	color:#fff;
}
</style>
<div id="user_panel">
	<div class="xyd_style" id="user_password_eof">
		<div class="xyd_header xyd_border_bottom">
			<i aria-hidden="true" class="fa fa-user" style="font-size:16px"></i>
			&nbsp;&nbsp;&nbsp;
			<span class="">修改密码</span>
		</div>
		<div class="xyd_body">
			<div class="xyd_group xyd_clearfix">
				<div class="xyd_float xyd_label">旧密码：</div>
				<div class="xyd_float xyd_input">
					<input type="password" class="form-control input-sm" id="input_code"/>
				</div>
				<div class="xyd_float xyd_message" id="message_code">&nbsp;</div>
			</div>
			<div class="xyd_inline"></div>
			<div class="xyd_group xyd_clearfix">
				<div class="xyd_float xyd_label">新密码：</div>
				<div class="xyd_float xyd_input">
					<input type="password" class="form-control input-sm" id="input_new"/>
				</div>
				<div class="xyd_float xyd_message" id="message_new">&nbsp;</div>
			</div>
			<div class="xyd_group xyd_clearfix">
				<div class="xyd_float xyd_label">密码安全强度：</div>
				<div class="xyd_float xyd_input" style="width:400px;color:#666;">
					<div id="password_level" class="xyd_clearfix">
						<div class="level xyd_float">弱</div>
						<div class="level xyd_float">中</div>
						<div class="level xyd_float">强</div>
					</div>
					<div style="color:#999;">6-16个字符，请使用字母加数字或特殊符号的组合密码</div>
				</div>
				<div class="xyd_float xyd_message" id="message_new">&nbsp;</div>
			</div>

			<div class="xyd_group xyd_clearfix">
				<div class="xyd_float xyd_label">确认新密码：</div>
				<div class="xyd_float xyd_input">
					<input type="password" class="form-control input-sm" id="input_new1"/>
				</div>
				<div class="xyd_float xyd_message" id="message_new1">&nbsp;</div>
			</div>
			<div class="xyd_group xyd_clearfix">
				<div class="xyd_float xyd_label">&nbsp;</div>
				<div class="xyd_float xyd_input">
					<button class="btn btn-primary btn-block btn-sm" id="btn_userAction">
						<i aria-hidden="true" class="fa fa-check" style="font-size:16px;"></i>
						&nbsp;&nbsp;&nbsp;提交
					</button>
				</div>
				<div class="xyd_float xyd_message">&nbsp;</div>
			</div>
		</div>
	</div>
</div>

<script>
var user;
$(function(){
	
	user = new Object();
	
	var box = $("#user_panel");
	
	var el_code = box.find("#input_code");
	var el_new = box.find("#input_new");
	var el_new1 = box.find("#input_new1");
	
	var el_level = box.find("#password_level");
	
	//节点-旧密码
	el_code.bind("keyup blur",function(){
		user.inputCode();
	});
	
	//节点-新密码
	el_new.bind("keyup blur",function(){
		user.inputNew();
	});
	
	//节点-二次密码
	el_new1.bind("keyup blur",function(){
		user.inputNew1();
	});
	
	//节点-提交
	$("#btn_userAction").bind("click",function(){
		if(!user.inputCode()|| !user.inputNew() || !user.inputNew1()){
			return false;
		}
		layer.confirm('您确定修改密码？', {title:'提示',btn: ['确定', '取消']}, function(){
			layer.msg('提交成功');
		});	
	});
	
	
	
	//对象-旧密码
	user.inputCode = function(){
		var msg = $("#message_code");
		var str = "";
		if(el_code.val().length<1){
			str = "<span class=\"label label-warning arrowed arrowed-right\">"
					+ "密码不能为空"
					+	"</span>"
		}
		msg.html(str);
		if(str.length>0){return false;}
		return true;
	}
	
	//对象-新密码
	user.inputNew = function(){
		var str = el_new.val();
		var html = "";
		if(str.length<1){
			html = "<span class=\"label label-warning arrowed arrowed-right\">"
					+ "新密码不能为空"
					+	"</span>";
		}else if(str.length<6){
			html = "<span class=\"label label-warning arrowed arrowed-right\">"
					+ "密码长度必须大于等于6位"
					+	"</span>";
		}else if(str.length>16){
			html = "<span class=\"label label-warning arrowed arrowed-right\">"
					+ "密码长度大于16位"
					+	"</span>";
		}
		
		$("#message_new").html(html);
		
		if(html.length>0){
			return false;
		}
		
		if(el_new1.val().length>0 && el_new1.val()!==el_new.val()){
			var temp = "<span class=\"label label-warning arrowed arrowed-right\">"
					+ "两次密码输入不一致"
					+	"</span>"
			$("#message_new1").html(temp);
		}else{
			$("#message_new1").html("");
		}
		
		var l = xyd.fn.getPasswordLevel(str);
		html = "";
		if(l<=1){
			html += "<div class=\"level xyd_float levelRed\">弱</div>"
				+ "<div class=\"level xyd_float\">中</div>"
				+ "<div class=\"level xyd_float\">强</div>";
		}else if(l==2){
			html += "<div class=\"level xyd_float\">弱</div>"
				+ "<div class=\"level xyd_float leveBlue\">中</div>"
				+ "<div class=\"level xyd_float\">强</div>";
		}else if(l==3){
			html += "<div class=\"level xyd_float\">弱</div>"
				+ "<div class=\"level xyd_float\">中</div>"
				+ "<div class=\"level xyd_float leveGreen\">强</div>";
		}else{
			html += "<div class=\"level xyd_float\">弱</div>"
				+ "<div class=\"level xyd_float\">中</div>"
				+ "<div class=\"level xyd_float\">强</div>";
		}
		
		el_level.html(html);
		if(l<1){
			return false;
		}
		return true;
	}
	
	//对象-二次密码
	user.inputNew1 = function(){
		var msg = $("#message_new1");
		var str = "";
		if(el_new1.val().length<1){
			str = "<span class=\"label label-warning arrowed arrowed-right\">"
					+ "二次密码不能为空"
					+	"</span>"
		}else if(el_new1.val()!==el_new.val()){
			str = "<span class=\"label label-warning arrowed arrowed-right\">"
					+ "两次密码输入不一致"
					+	"</span>"
		}
		
		msg.html(str);
		if(str.length>0){
			return false;
		}
		return true;
	}

})
</script>